/* 提供频道相关的vuex操作 */

import { getChannels, getAllChannels } from '@/api/channels'

const state = {
  // 用户频道数据
  userChannel: [],
  // 可选频道数据 ==> 所有频道 - 用户频道

  // 所有频道数据
  allChannel: []
}
const mutations = {
  setUserChannel(state, value) {
    state.userChannel = value
  },
  addUserChannel(state, channel) {
    // 往我的频道添加
    state.userChannel.push(channel)
  },
  setAllChannel(state, value) {
    state.allChannel = value
  }
}
const actions = {
  // ajax异步操作 ==> 获取数据 ==> commit('setUserChannel')
  async ActionGetUserChannel(context) {
    const res = await getChannels()
    // console.log(res)
    context.commit('setUserChannel', res.data.channels)
  },
  async ActionGetAllChannel(context) {
    const res = await getAllChannels()
    // console.log(res)
    context.commit('setAllChannel', res.data.channels)
  }
}
const getters = {
  // vuex的计算属性 ==> 计算出可选频道的数据
  optionChannel(state) {
    // 计算 ==> 所有频道数据 - 我的频道数据 ==> 可选
    // return state.allChannel - state.userChannel // error
    // 思路：来遍历所有的频道，从里面过滤出我的频道没有的数据
    // filter 过滤
    // some 判断 数组里面有符合条件的，只要有符合条件就会返回true

    /* return state.allChannel.filter(item => {
      // 我的频道在所有频道中是有出现的

      // const res = state.userChannel.some(channel => channel.id === item.id)
      // if (res === true) {
      //   // 不是要的可选频道
      //   return false
      // } else { // res 是false
      //   // 要的可选频道
      //   return true
      // }

      // 以上代码简化
      return !state.userChannel.some(channel => channel.id === item.id)
    }) */

    // 最终简化
    return state.allChannel.filter(
      item => !state.userChannel.some(channel => channel.id === item.id)
    )
  }
}

export default {
  // 命名空间
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
